<template>
  <div class="school">
      <h2>这是School组件</h2>
      <h3>学校姓名:{{School.name}}</h3>
      <h3>学校地址:{{School.address}}</h3>
      <h3>学校的电话:{{School.tel}}</h3>
      <h3>学校的校龄:{{School.age}}</h3>
      <select v-model.number="n">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <button @click="incrementAddAge(n)">点击添加年龄</button>
      <hr>
      <h4>这是SayingList里面列表的数量:{{SayingList.length}}</h4>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
  export default {
    name:'School',
    data(){
      return {
        n:1
      }
    },
    computed: {
        ...mapState(['School','SayingList'])
    },
    methods:{
      // incrementAddAge(){
      //   this.School.age += this.n 
      // }
      ...mapMutations({incrementAddAge:'INCREMENT_ADD_AGE'})
    }
  }
</script>

<style scoped>
  .school{
      background:cyan;
      padding:30px;
  }
</style>